<template>
  <div>
    App
    <!-- 
        作用：父子组件通信，通信的是标签数据
        插槽分类：默认、具名 作用域

        优先考虑默认插槽，其他内容考虑具名插槽
        渲染标签数据需要使用子组件数据，使用作用域插槽
   -->
    <A>
      <div>我是默认插槽</div>
    </A>

    <B>
      <template #header> 我是具名插槽header </template>
      <template #footer> 我是具名插槽footer </template>
    </B>

    <C>
      <template v-slot="{ loading }">
        <p>num: {{ num }}</p>
        <p v-show="loading">我是作用域插槽loading</p>
      </template>
      <!-- v-slot可简写# -->
      <template #xxx="{ loading }">
        <p v-show="loading">我是作用域插槽loading</p>
      </template>
    </C>
  </div>
</template>

<script>
import A from "./A";
import B from "./B";
import C from "./C";

export default {
  name: "App",
  components: {
    A,
    B,
    C,
  },
  data() {
    return {
      num: 0,
    };
  },
};
</script>

<style></style>
